<template>
  <div class='header'>

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid tab">
        <div class="navbar-header">
          <router-link to="/home">
           <img src="../../img/logon2.png" alt="智充logo" class="">
            <img src="../../img/logon3.png" alt="智充logo" class="">
          </router-link>
        </div>
        <ul class="nav navbar-nav  ">
          <li class="tab-item ">
            <router-link to="/home"><i class="iconfont icon-home1"></i> 首页</router-link>
          </li>
          <li class="tab-item ">
            <router-link to="/about"><i class="iconfont icon-people"></i> 关于力为</router-link>
          </li>
          <li class="tab-item ">
            <el-dropdown class="nav-drop">
              <span class="el-dropdown-link">
                  <router-link to="/product"><i class="iconfont icon-iconfonticonfontweibiaoti1"></i>产品中心</router-link>
              </span>
              <el-dropdown-menu slot="dropdown" class="nav-drop-menu">
                <el-dropdown-item class="nav-drop-item">
                  <router-link to="/product1">运动控制器</router-link>
                </el-dropdown-item>
                <el-dropdown-item class="nav-drop-item">
                  <router-link to="/product2">数据采集终端</router-link>
                </el-dropdown-item>
                <el-dropdown-item class="nav-drop-item">
                  <router-link to="/product3">伺服驱动器</router-link>
                </el-dropdown-item>
                <el-dropdown-item class="nav-drop-item">
                  <router-link to="/product4">制造执行系统</router-link>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>

          <li class="tab-item">
            <el-dropdown class="nav-drop">
               <span class="el-dropdown-link">
                   <router-link to="/cases"><i class="iconfont icon-anli1"></i>典型案例</router-link>
               </span>
              <el-dropdown-menu slot="dropdown" class="nav-drop-menu">
                <el-dropdown-item class="nav-drop-item">
                  <router-link to="/cases1">机器人运动控制系统</router-link>
                </el-dropdown-item>
                <el-dropdown-item class="nav-drop-item">
                  <router-link to="/cases2">多轴运动控制系统</router-link>
                </el-dropdown-item>
                <el-dropdown-item class="nav-drop-item">
                  <router-link to="/cases3">AGV运动控制系统</router-link>
                </el-dropdown-item>
                <el-dropdown-item class="nav-drop-item">
                  <router-link to="/foo">机器人3D监控系统</router-link>
                </el-dropdown-item>
                <el-dropdown-item class="nav-drop-item">
                  <router-link to="/bar">数字化集成制造系统</router-link>
                </el-dropdown-item>
                <el-dropdown-item class="nav-drop-item">
                  <router-link to="/cee">精密铸造MES系统</router-link>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
          <li class="tab-item ">
            <router-link to="/mien"><i class="iconfont icon-fengcai-copy"></i> 公司风采</router-link>
          </li>
          <li class="tab-item ">
            <router-link to="/contact"><i class="iconfont icon-phone1"></i> 联系我们</router-link>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {};

</script>

<style lang="stylus" rel="stylesheet/stylus">
  .header {
    width: 100%
    nav {
      margin-bottom: 0px
      .tab {
        height: 50px
        width: 100%
        .tab-item {
          height: 50px
          margin: 0
          a:hover  {
            color: #0a0f33
          }
          .nav-drop {
            padding: 14px 25px 15px 25px
            color: #0f3477
            position: relative
          }
        }
      }
    }
  }

  .nav-drop-menu
    padding: 0
    margin: auto
    background-color #79737a
    border-radius :4px
    width: 130px
    /*text-align： center*/
    .nav-drop-item
      width: 100%
      padding: 2px 0 2px
      list-style: none
      text-align: center
      a
        color: #e4e4e4

  a
    text-decoration: none !important
    color: #777


</style>
